<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        // 设置图形的填充颜色
        // fillStyle = color
        // 设置图形轮廓的颜色
        // strokeStyle = color

        // for (let i = 0; i < 6; i++) {
        //   for (let j = 0; j < 6; j++) {
        //     ctx.fillStyle =
        //       "rgb(" +
        //       Math.floor(255 - 42.5 * i) +
        //       "," +
        //       Math.floor(255 - 42.5 * j) +
        //       ",0)";
        //     ctx.fillRect(j * 50, i * 50, 50, 50);
        //   }
        // }
        for (let i = 0; i < 6; i++) {
          for (let j = 0; j < 6; j++) {
            ctx.strokeStyle =
              "rgb(" +
              Math.floor(255 - 42.5 * i) +
              "," +
              Math.floor(255 - 42.5 * j) +
              ",0)";
            ctx.strokeRect(j * 50, i * 50, 50, 50);
          }
        }
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
